﻿@using viBook.Models
@model IEnumerable<Category>
@{
    ViewBag.Title = "ListCategories";
    ViewBag.Menu = "Category";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
@(Html.Telerik().Grid<Category>()
        .Name("Grid")
        .DataKeys(keys =>
        {
            keys.Add(p => p.Id);
        })
            .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { style = "margin-left:0" }))
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("ListCategoriesAjax", "Admins")
                .Insert("_InsertAjaxEditing", "Admins")
                .Update("SaveCateAjaxEditing", "Admins")
                .Delete("_DeleteAjaxEditing", "Admins");
        })
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Width(210);
            columns.Bound(p => p.CategoryName).Width(130);
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.Image);
                commands.Delete().ButtonType(GridButtonType.Image);
            }).Width(180).Title("Commands");
        })
            .Editable(editing => editing.Mode(GridEditMode.InLine))
        .Pageable()
        .Scrollable()
        .Sortable()
)
@section HeadContent {
    <style type="text/css">
    .field-validation-error
    {
        position: absolute;
        display: block;
    }
    
    * html .field-validation-error { position: relative; }
    *+html .field-validation-error { position: relative; }
    
    .field-validation-error span
    {
        position: absolute;
        white-space: nowrap;
        color: red;
        padding: 17px 5px 3px;
        background: transparent url('@Url.Content("~/Content/Common/validation-error-message.png") ') no-repeat 0 0;
    }
    
    /* in-form editing */
    .t-edit-form-container
    {
        width: 350px;
        margin: 1em;
    }
    
    .t-edit-form-container .editor-label,
    .t-edit-form-container .editor-field
    {
        padding-bottom: 1em;
        float: left;
    }
    
    .t-edit-form-container .editor-label
    {
        width: 30%;
        text-align: right;
        padding-right: 3%;
        clear: left;
    }
    
    .t-edit-form-container .editor-field
    {
        width: 60%;
    }
</style>
}
